<template>
	<view>
		
		
		<!-- #ifdef APP-PLUS -->
		<u-navbar :custom-back="customBack" title="新手指南" back-icon-color="#000" :is-back="true" title-color="#000" :background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<view class="kefu_Box">
			<button open-type="share">
				<image class="kefu_icon" :src="BestImgUrl + 'Frame 1765.png'"></image>
			</button>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS -->
		<view class="kefu_Box" @click="AppminiProgram()">
			<image class="kefu_icon" :src="BestImgUrl + 'Frame 1765.png'"></image>
		</view>
		<!-- #endif -->

		<image class="Top_bgtu" :src="BestImgUrl + 'WechatIMG8613.png'"></image>
		<view class="tabs_box">
			<view class="tabs_item_box" v-for="(item,index) in tabs" :key="index"
				:class="tabsindex != index?'touming':''">
				<image class="bgtu" :src="item.img" @click="tabsClick(index)"></image>
				<image class="xiasanjiao" :src="BestImgUrl + 'Polygon 18.png'" v-if="tabsindex == index"></image>
			</view>
		</view>
		
		
		 

		<view v-show="tabsindex == 0">
			<view class="video_box">
				<image class="video_bg" :src="BestImgUrl + 'Group 34063.png'"></image>
				<image class="video_pay" :src="BestImgUrl + 'Group 33980.png'" @click="previewVideo(system_video.video)"></image>
			</view>
			<view class="uSwiper">
				<u-swiper :circular="false" :autoplay="autoplay" :current="current1" bg-color="" mode="none"
					interval="4000" @change="uSwiperchange" :list="system_image" :height="lbHeight"
					img-mode="scaleToFill" :effect3d="true" :effect3d-previous-margin="effect3dPreviousMargin"
					name="image"></u-swiper>
				<view class="bottom_info">
					<view class="bushu">
						<span>{{uSwiperIdx +1}}</span>
						<view>第{{uSwiperIdx +1}}步（共{{system_image.length}}步）</view>
					</view>
				</view>
				<view class="bottom_wenan">{{idxWenan}}</view>
				<view class="zhishiqi_box">
					<span v-for="(zsq,index) in system_image" :key="index"
						:class="uSwiperIdx == index?'zsqColor':''"></span>
				</view>
			</view>
		</view>

		<view v-show="tabsindex == 1">
			<view class="video_box">
				<image class="video_bg" :src="BestImgUrl + 'Group 34076.png'"></image>
				<image class="video_pay" :src="BestImgUrl + 'Group 33980.png'"
					@click="previewVideo(official_video.video)"></image>
			</view>
			<view class="uSwiper">
				<u-swiper :circular="false" :autoplay="autoplay2" :current="current2" bg-color="" mode="none"
					interval="4000" @change="uSwiperchange2" :list="official_image" :height="lbHeight"
					img-mode="scaleToFill" :effect3d="true" :effect3d-previous-margin="effect3dPreviousMargin"
					name="image"></u-swiper>
				<view class="bottom_info">
					<view class="bushu">
						<span>{{uSwiperIdx2 +1}}</span>
						<view>第{{uSwiperIdx2 +1}}步（共{{official_image.length}}步）</view>
					</view>
				</view>
				<view class="bottom_wenan">{{idxWenan2}}</view>
				<view class="zhishiqi_box">
					<span v-for="(zsq,index) in official_image" :key="index" :class="uSwiperIdx2 == index?'zsqColor':''"></span>
				</view>
			</view>
		</view>















		<!-- 查看回显视频 -->
		<view class="preview-full" v-if="previewVideoSrc!=''">
			<video show-mute-btn controls :autoplay="true" :src="previewVideoSrc">
				<cover-image class="preview-full-gbbtn" @click="previewVideoClose"
					src="/static/images/delete.png"></cover-image>
			</video>
			<view class="preview-full-xzbtn">
				<u-button type="primary" :loading="loadingBtn" @click="baocunVideoS(ForwardDta.video_url)"><u-icon
						name="download" size="24" color="#fff"></u-icon>下载</u-button>
			</view>
			<view class="preview-full-info">{{previewVideoInfo}}</view>
		</view>
		
		<view v-show="jijiangkaishi_Show" class="chenggong_show" @touchmove.prevent catchtouchmove="true">
			<view class="tc_wrap">
				<view class="tc_wrap_box">
					<view class="tc_images">
						<image :src="BestImgUrl + 'xiaohuitishi.png'" mode="widthFix" @click="Toqiangdan()"></image>
						<view class="tc_info_box">
							<view class="wenan_info">小惠的指引是否帮助到您？您也可添加客服，实时为您解答。</view>
							<view class="qxd_btn_box">
								<view class="qxd_btn1" @click="outPage()">我学会了</view>
								<!-- #ifdef APP-PLUS || H5 -->
								<view class="qxd_btn2" @click="callservice()">寻求客服帮助</view>
								<!-- #endif -->
								
								<!-- #ifdef MP-WEIXIN -->
								<view class="qxd_btn2">
									<button type="default" open-type="contact">寻求客服帮助</button>
								</view>
								<!-- #endif -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		
		
		

		<view style="height: 100rpx;"></view>
		<!--<view class="lunbotu_box">
			<swiper class="swiper-box" :indicator-dots="false" indicator-color='#fff' indicator-active-color='#0086d6' :autoplay="autoplay" interval="6000" :circular='false' @change="swiperChange" previous-margin="0" :next-margin="nextMargin">
				<swiper-item v-for="(item,index) in system_image" :key="index">
					<view class="scrollx_items" :class="currentStyle == 1 || official_image.length == 1?'scrollx_items_width':''">
						<view class="ren_info">
							<view class="hbaotu">
								<image :src="item.image" mode="scaleToFill"></image>
								<view class="youbian" v-if="currentStyle != 1">
									<u-icon name="arrow-right-double" size="56" color="#333"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom_info">
						<view class="bushu">
							<span>{{index +1}}</span>
							<view>第{{index +1}}步（共{{system_image.length}}步）</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>-->

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				jijiangkaishi_Show: false,
				
				current1: 0,
				current2: 0,

				loadingBtn: false,
				previewVideoSrc: '',
				previewVideoInfo: '',
				previewVideovid: '',

				// #ifdef H5
				effect3dPreviousMargin: '120',
				// #endif

				// #ifdef APP-PLUS || MP-WEIXIN
				effect3dPreviousMargin: '120',
				// #endif


				idxWenan: '',
				uSwiperIdx: 0,
				idxWenan2: '',
				uSwiperIdx2: 0,

				nextMargin: '140rpx',
				autoplay: false,
				autoplay2: false,

				currentIndex: 1,
				currentStyle: 0,

				boxHeight: null,

				BestImgUrl: app.globalData.imgurlBwc,
				tabs: [{
						name: '霸王餐教程',
						img: app.globalData.imgurlBwc + 'Group 33973.png'
					},
					{
						name: '官返教程',
						img: app.globalData.imgurlBwc + 'Group 33972.png'
					}
				],
				tabsindex: 0,
				official_image: [],
				official_video: {},

				system_image: [],
				system_video: {},

				lbHeight: '1000',

			}
		},
		onBackPress(e) {
			//e.from === 'backbutton' 说明如果点击的是物理返回键或导航栏的返回键就进行以下操作
			if (e.from === 'backbutton') {
				this.jijiangkaishi_Show = true
				//return true 
				//返回值为true 时,表示不执行默认的返回（默认返回上一页），执行自定义的返回
				//如果要限制必须写成true
				return true;
			}
		},
		onLoad(options) {
			
			// #ifdef MP-WEIXIN
			console.log('二维码信息', options)
			//绑定推荐人-小程序端
			if (JSON.stringify(options) != '{}') {
				let pdi = {
					parent_id: options.scene,
					reseller_id: {
						reseller_id: uni.getStorageSync('reseller_id') || ''
					}
				}
				app.globalData.bindSaveParentId(pdi);
			} else {
				//options为空
			}
			// #endif
			
			this.GetDetaild()
			let that = this
			//获取设备高度
			uni.getSystemInfo({
				success: function(res) {
					//console.log('系统信息', res)
					//动态设置轮播图高度
					// #ifdef APP-PLUS
					let Sheight = res.windowHeight + 0
					// #endif

					// #ifdef MP-WEIXIN
					let Sheight = res.windowHeight + 60
					// #endif

					// #ifdef H5
					let Sheight = res.windowHeight + 150
					// #endif

					//that.lbHeight = JSON.stringify(Sheight)
					//console.log('屏幕高度', Sheight)
				}
			})
		},
		onReady() {
			let that = this
		},
		methods: {
			onShareAppMessage() {
				let that = this
				let myid = uni.getStorageSync('userinfo').id
				
				return {
				  title: '1分钟教会你0元吃外卖',
				  path: '/mePages/pages/BeginnersGuide?parent_id=' + myid,
				  imageUrl: that.BestImgUrl + 'yiyuanchiwaimai.png',
				  type: 0,
				  success: (res) => {
				    //console.log("转发成功", res);
				  },
				  fail: (res) => {
				    //console.log("转发失败", res);
				  } 
				}
			},
			onShareTimeline() {
				let that = this
				let myid = uni.getStorageSync('userinfo').id
				
				return {
				  title: '1分钟教会你0元吃外卖',
				  query: '/mePages/pages/BeginnersGuide?parent_id=' + myid,
				  imageUrl: that.BestImgUrl + 'yiyuanchiwaimai.png',
				  success: (res) => {
				    //console.log("转发成功", res);
				  },
				  fail: (res) => {
				    //console.log("转发失败", res);
				  } 
				}
			},
			
			
			
			
			outPage() {
				uni.navigateBack()
			},
			customBack(){
				this.jijiangkaishi_Show = true
			},
			previewVideo(src) {
				//this.previewVideovid = vid
				//this.previewVideoInfo = info
				//this.previewVideoSrc = src;
				let data = {
					url: src
				}
				uni.navigateTo({
					url: '/subpackageA/pages/PlayVideo/PlayVideo?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			previewVideoClose() {
				this.previewVideovid = ''
				this.previewVideoInfo = ''
				this.previewVideoSrc = ''
			},


			uSwiperchange(e) {
				this.uSwiperIdx = e
				this.idxWenan = this.system_image[e].content
				//console.log(e)
			},
			uSwiperchange2(e) {
				this.uSwiperIdx2 = e
				this.idxWenan2 = this.official_image[e].content
				//console.log(e)
			},
			GetDetaild() {
				let that = this
				that.$api.GetBeginnerTutorial({
				
				}).then(res => {
					console.log('新手教程', res.data.result)
					that.official_image = res.data.result.official_image //官返
					that.official_video = res.data.result.official_video //官返
					this.idxWenan2 = this.official_image[0].content
				
					that.system_image = res.data.result.system_image //霸王餐
					that.system_video = res.data.result.system_video //霸王餐
					this.idxWenan = this.system_image[0].content
				
				}).catch(err => {
				
				})
			},
			tabsClick(idx) {
				let that = this
				that.tabsindex = idx
				if (idx == 0) {
					that.current1 = 0
					//this.autoplay = false
					//this.autoplay2 = false
				} else {
					that.current2 = 0
					//this.autoplay = false
					//this.autoplay2 = false
				}
			},
			swiperChange(e) {
				let that = this
				that.currentIndex = e.detail.current
				this.currentIndex = (this.currentIndex + 1) % this.system_image.length;
				if (this.currentIndex == 0) {
					this.currentStyle = 1
					//this.nextMargin = '40rpx'
				} else {
					that.currentStyle = 0
					//this.nextMargin = '40rpx'
				}
			},
			imageLoad: function(e) {
				var _this = this;
				/* 图片容器的id */
				var id = e.currentTarget.id;
				/* 图片容器对应数组数据的索引 */
				var index = id.substr(3);
				/* 图片容器对应的数据 */
				var item = _this.system_image[index];

				/* 查询图片容器的宽度 */
				const query = uni.createSelectorQuery().in(this);
				query.select('#' + id).boundingClientRect(data => {
					/* 计算图片容器的宽度 */
					item.containerHeight = data.width * e.detail.height / e.detail.width;
					/* 强制刷新。如不强制刷新，则图片容器高度不会改变 */
					_this.$forceUpdate();
					_this.boxHeight = item.containerHeight
				}).exec();
			},
			fenxiang() {
				uni.navigateTo({
					url: '/subpackageA/pages/Shareposters/Shareposters'
				})
			},
			//APP || H5拉起客服
			callservice() {
				let data = uni.getStorageSync('customerServiceData')
				// #ifdef H5
				window.location.href = data.h5.url
				// #endif
				
				// #ifdef APP-PLUS
				let appurl = data.app.url
				uni.navigateTo({
					url: '/pages/Webview/Webview?url=' + encodeURIComponent(JSON.stringify(appurl))
				})
				// #endif
			},
			// 小程序跳转企业客服
			toCustomerServicePages: function() {
				try {
					let data = uni.getStorageSync('customerServiceErWeima')
					console.log('客服链接',data)
					
					wx.openCustomerServiceChat({
						extInfo: {
							url: data.path //客服ID
						},
						corpId: data.appid, //企业微信ID
						success(res) {}
					})
				} catch (error) {
					showToast("请更新至微信最新版本")
				}
			},
			
			//APP分享小程序卡片
			AppminiProgram(){
				let that = this
				let myid = uni.getStorageSync('userinfo').id
				uni.share({
				    provider: 'weixin',
				    scene: "WXSceneSession",
				    type: 5,
				    imageUrl: that.BestImgUrl + 'yiyuanchiwaimai.png',
				    title: '1分钟教会你0元吃外卖',
				    miniProgram: {
				        id: 'gh_f524c21a017c',
				        path: '/pages/index/index?parent_id=' + myid,
				        type: 0,// 0-正式版； 1-测试版； 2-体验版。 默认值为0
				        webUrl: 'https://h5.hwhsh.com/#/pages/logon/logon?parent_id=' + myid
				    },
				    success: ret => {
				        console.log(JSON.stringify(ret));
				    }
				});
			}
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF6EC;
	}

	.kefu_Box {
		bottom: 45px !important;
		/deep/ button {
			background-color: transparent !important;
			padding: 0 !important;
			margin: 0 !important;
			line-height: 34rpx !important;
			font-size: 24rpx !important;
		}
			
		/deep/ button::after {
			border: none !important;
		}
	}

	.uSwiper {
		margin: 30rpx 0;

		/deep/ .u-swiper-image {}
	}

	.zhishiqi_box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;

		span {
			margin: 0 5rpx;
			display: inline-block;
			width: 20rpx;
			height: 20rpx;
			background-color: #FFAC84;
			border-radius: 200rpx;
		}

		.zsqColor {
			background-color: #FF3D00 !important;
		}
	}

	.bottom_wenan {
		text-align: center;
		width: 70%;
		margin: 20rpx auto 0;
		font-weight: bold;
		color: #333;
		font-size: 32rpx;
	}

	.bottom_info {
		margin-top: 20rpx;
		text-align: center;

		.bushu {
			display: flex;
			align-items: center;
			justify-content: center;

			span {
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
				background-color: #FF3D00;
				text-align: center;
				line-height: 40rpx;
				border-radius: 200rpx;
				color: #ffffff;
			}

			view {
				font-weight: bold;
				color: #FF3D00;
				font-size: 34rpx;
				margin-left: 10rpx;
			}
		}
	}

	.video_box {
		margin: 20rpx auto;
		position: relative;
		text-align: center;
		width: 662rpx;
		height: 168rpx;

		.video_bg {
			margin: 0 auto;
			width: 662rpx;
			height: 168rpx;
		}

		.video_pay {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.tabs_box {
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		width: 92%;
		margin: 0 auto;

		.touming {
			opacity: .5;
		}

		.tabs_item_box {
			margin: 0 10rpx;
			flex: 1;
			position: relative;

			.bgtu {
				width: 100%;
				height: 80rpx;
			}

			.xiasanjiao {
				position: absolute;
				bottom: -9px;
				left: 0;
				right: 0;
				margin: 0 auto;
				width: 46rpx;
				height: 26rpx;
			}
		}
	}

	.Top_bgtu {
		width: 100%;
		height: 664rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.lunbotu_box {
		padding: 0 0 0 37rpx;

		.swiper-box {
			height: 1150rpx;
		}

		.scrollx_items_width {
			width: 100% !important;
		}

		.scrollx_items {
			width: 100%;
			height: 1000rpx;
			position: relative;
			border-radius: 25rpx;

			//box-shadow: 0 0 7px 0px rgba(0, 0, 0, 0.05);
			.ren_info {
				position: relative;

				.hbaotu {
					display: flex;
					align-items: center;
					position: relative;

					image {
						width: 100%;
						height: 1000rpx;
						//border-radius: 20rpx;
					}

					.youbian {
						padding: 0 10rpx;
					}
				}
			}
		}

		.scrollx_items:first-child {
			//margin-left: 30rpx;
		}

		.scrollx_items:last-child {
			//margin-right: 28rpx;
		}
	}

	.preview-full {
		padding-top: var(--status-bar-height); //这里是状态栏css变量;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: calc(100vh);
		z-index: 1002;
		background-color: #000000;
	}

	.preview-full video {
		width: 100%;
		height: 88%;
		z-index: 1002;
	}

	.preview-full-close {
		position: fixed;

		/* #ifdef MP-WEIXIN */
		left: 32rpx;
		/* #endif */

		/* #ifdef H5 || APP-PLUS */
		right: 32rpx;
		/* #endif */

		top: 115rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-align: center;
		z-index: 1003;
		/* 	background-color: #808080; */
		color: #fff;
		font-size: 65rpx;
		font-weight: bold;
	}

	.preview-full-info {
		//position: fixed;
		z-index: 2003;
		color: #fff;
		font-size: 24rpx;
		bottom: 100rpx;
		left: 0;
		padding: 0 20rpx;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.preview-full-gbbtn {
		position: absolute;
		z-index: 2009;
		color: #fff;
		font-size: 24rpx;
		top: 55rpx;
		border-radius: 200rpx;
		width: 60rpx;
		height: 60rpx;
		right: 22rpx;
	}

	.preview-full-xzbtn {
		position: fixed;
		z-index: 2003;
		color: #fff;
		font-size: 24rpx;
		bottom: 30rpx;
		border-radius: 200rpx;
		background-color: #242424;
		padding: 0 0;
		left: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		/deep/ .u-btn--primary {
			height: 54rpx !important;
			line-height: 54rpx !important;
			border-color: #242424 !important;
			background-color: #242424 !important;
			border-radius: 200rpx !important;
			font-size: 24rpx !important;
		}

		/deep/ .u-btn {
			padding: 0 20rpx !important;
		}

		/deep/ uni-button:after {
			border-radius: 200rpx !important;
		}
	}

	.preview-full-yjzf {
		position: fixed;
		z-index: 2003;
		color: #fff;
		font-size: 24rpx;
		bottom: 30rpx;
		border-radius: 200rpx;
		background-color: #242424;
		padding: 10rpx 20rpx;
		right: 32rpx;
	}
	
	.chenggong_show {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10098;
	
		.tc_wrap {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			width: 558rpx;
			height: 648rpx;
			z-index: 10099;
	
			.tc_wrap_box {
				position: relative;
	
				.tc_images {
					position: relative;
	
					image {
						width: 558rpx;
						height: 648rpx;
					}
	
					.tc_info_box {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 50rpx;
						text-align: center;
						width: 88%;
						margin: 0 auto;
	
						.wuyuan {
							font-size: 40rpx;
							font-weight: bold;
							text-align: center;
							color: #FE7A1B;
						}
	
						.wenan_info {
							font-size: 26rpx;
							color: #333;
							margin-bottom: 30rpx;
						}
						
						.qxd_btn_box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							.qxd_btn1 {
								width: 200rpx;
								background-image: linear-gradient(to left, #ffffff, #ffffff);
								border: 1px solid #FA4018;
								color: #FA4018;
								font-weight: bold;
								text-align: center;
								padding: 20rpx;
								border-radius: 200rpx;
								margin-right: 20rpx;
							}
							.qxd_btn2 {
								flex: 1;
								background-image: linear-gradient(to left, #FF7F38, #FA4018);
								color: #ffffff;
								font-weight: bold;
								text-align: center;
								padding: 20rpx;
								border-radius: 200rpx;
								/deep/ button {
									background-color: transparent !important;
									padding: 0 !important;
									margin: 0 !important;
									line-height: 0 !important;
								}
								
								/deep/ button::after {
									border: none !important;
								}
							}
						}
	
						
					}
				}
	
				.tc_guanbi {
					position: absolute;
					bottom: -90rpx;
					left: 0;
					right: 0;
					margin: 0 auto 0;
	
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
	
		}
	}
</style>